import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class FrostedGlass extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Positioned.fill(
              child: Image.network(
            'http://yanxuan.nosdn.127.net/65091eebc48899298171c2eb6696fe27.jpg',
            fit: BoxFit.cover,
          )),
          Center(
            //可裁切的矩形
            child: ClipRect(
              //背景过滤器
              child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
                child: Opacity(
                  opacity: 0.8,
                  child: CustomScrollView(
                    slivers: <Widget>[
                      SliverPersistentHeader(
                        pinned: true,
                        delegate: SliverCustomHeaderDelegate(
                            title: '元好问',
                            collapsedHeight: 40,
                            expandedHeight: 250,
                            paddingTop: MediaQuery.of(context).padding.top,
                            coverImgUrl:
                                'https://img.zcool.cn/community/01c6615d3ae047a8012187f447cfef.jpg@1280w_1l_2o_100sh.jpg'),
                      ),
                      SliverFillRemaining(child: FilmContent()),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class FilmContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _topwidget(),
          const Padding(
            padding: EdgeInsets.symmetric(vertical: 8, horizontal: 12),
            child: Text('发布职位 . 6'),
          ),
          Container(
            margin: const EdgeInsets.only(left: 10, right: 10),
            padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 12),
            decoration: const BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(6)),
            ),
            child: Column(
              children: [
                _normal(),
                _normal(),
                _normal(),
                _normal(),
                _normal(),
                _normal(),
              ],
            ),
          )
        ],
      ),
    );
  }
}

Widget _topwidget() {
  return Container(
    margin: const EdgeInsets.only(left: 10, right: 10),
    padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 12),
    decoration: const BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.all(Radius.circular(6)),
    ),
    child: const Row(
      children: [
        CircleAvatar(
          backgroundImage: NetworkImage(
            'http://img1.mukewang.com/5c18cf540001ac8206000338.jpg',
          ),
          radius: 20,
        ),
        SizedBox(
          width: 10,
        ),
        Expanded(
            child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              '微微科技集团1',
              style: TextStyle(color: Colors.black),
            ),
            Row(
              children: [
                Text(
                  '未融资 .',
                  style: TextStyle(color: Colors.grey),
                ),
                Text(
                  '不限 .',
                  style: TextStyle(color: Colors.grey),
                ),
                Text(
                  '其它',
                  style: TextStyle(color: Colors.grey),
                )
              ],
            )
          ],
        ))
      ],
    ),
  );
}

Widget _normal() {
  return Container(
    padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 12),
    child: Column(
      children: [
        const Row(
          children: [Expanded(child: Text('经理')), Text('17-22K.16')],
        ),
        const SizedBox(
          height: 10,
        ),
        Row(
          children: [
            Container(
              decoration: const BoxDecoration(color: Colors.grey),
              child: const Text('本科'),
            ),
            const SizedBox(
              width: 10,
            ),
            Container(
              decoration: const BoxDecoration(color: Colors.grey),
              child: const Text('5-10年'),
            ),
          ],
        )
      ],
    ),
  );
}

class SliverCustomHeaderDelegate extends SliverPersistentHeaderDelegate {
  final double collapsedHeight;
  final double expandedHeight;
  final double paddingTop;
  final String coverImgUrl;
  final String title;
  String statusBarMode = 'dark';

  SliverCustomHeaderDelegate({
    required this.collapsedHeight,
    required this.expandedHeight,
    required this.paddingTop,
    required this.coverImgUrl,
    required this.title,
  });

  @override
  double get minExtent => this.collapsedHeight + this.paddingTop;

  @override
  double get maxExtent => this.expandedHeight;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }

  void updateStatusBarBrightness(shrinkOffset) {
    if (shrinkOffset > 50 && this.statusBarMode == 'dark') {
      this.statusBarMode = 'light';
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        statusBarBrightness: Brightness.light,
        statusBarIconBrightness: Brightness.light,
      ));
    } else if (shrinkOffset <= 50 && this.statusBarMode == 'light') {
      this.statusBarMode = 'dark';
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        statusBarBrightness: Brightness.dark,
        statusBarIconBrightness: Brightness.dark,
      ));
    }
  }

  Color makeStickyHeaderBgColor(shrinkOffset) {
    final int alpha = (shrinkOffset / (this.maxExtent - this.minExtent) * 255)
        .clamp(0, 255)
        .toInt();
    return Color.fromARGB(alpha, 255, 255, 255);
  }

  Color makeStickyHeaderTextColor(shrinkOffset, isIcon) {
    if (shrinkOffset <= 50) {
      return isIcon ? Colors.white : Colors.transparent;
    } else {
      final int alpha = (shrinkOffset / (this.maxExtent - this.minExtent) * 255)
          .clamp(0, 255)
          .toInt();
      return Color.fromARGB(alpha, 0, 0, 0);
    }
  }

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    // this.updateStatusBarBrightness(shrinkOffset);
    return Container(
      height: this.maxExtent,
      width: MediaQuery.of(context).size.width,
      child: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          Container(
              child: Row(
            mainAxisAlignment: MainAxisAlignment.start, // 左对齐
            crossAxisAlignment: CrossAxisAlignment.center, // 竖直方向居中对齐
            children: [
              SizedBox(
                width: 10,
              ),
              CircleAvatar(
                backgroundImage: NetworkImage(
                  'http://img1.mukewang.com/5c18cf540001ac8206000338.jpg',
                ),
                radius: 20,
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    '元好问',
                    style: TextStyle(color: Colors.black),
                  ),
                  Text(
                    '检测专员',
                    style: TextStyle(color: Colors.grey),
                  ),
                ],
              ),
            ],
          )),
          Positioned(
            left: 0,
            top: this.maxExtent / 2,
            right: 0,
            bottom: 0,
            child: Container(),
          ),
          Positioned(
            left: 0,
            right: 0,
            top: 0,
            child: Container(
              color: this.makeStickyHeaderBgColor(shrinkOffset),
              child: SafeArea(
                bottom: false,
                child: Container(
                  height: this.collapsedHeight,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      IconButton(
                        icon: Icon(
                          Icons.arrow_back_ios,
                          color: this
                              .makeStickyHeaderTextColor(shrinkOffset, true),
                        ),
                        onPressed: () => Navigator.pop(context),
                      ),
                      Text(
                        this.title,
                        style: TextStyle(
                          fontSize: 20,
                          fontWeight: FontWeight.w500,
                          color: this
                              .makeStickyHeaderTextColor(shrinkOffset, false),
                        ),
                      ),
                      IconButton(
                        icon: Icon(
                          Icons.share,
                          color: this
                              .makeStickyHeaderTextColor(shrinkOffset, true),
                        ),
                        onPressed: () {},
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
